<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选择标签</title>

  <link rel="stylesheet" href="/layui/css/layui.css">

  <style>
    body{
      background: #fff
    }
    .add-panel-container {
      padding: 5px 0 20px;
      width: 680px;
      margin: 0 auto;
    }
    .add-panel-container, .add-panel-container * {
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
    }
    .add-panel {
      height: 375px;
      width: 100%;
      margin: 20px 0;
      overflow: hidden;
    }
    /*滚动条*/
    .add-panel ::-webkit-scrollbar {
      width: 4px;
    }
    /*滚动条中间滑动部分*/
    .add-panel ::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 3px;
    }

    .apanel-search {
      height: 28px;
      margin: 10px 30px;
      background: #fff;
      border-radius: 4px;
      margin-bottom: 8px;
      color: rgba(0,0,0,.65);
      font-size: 14px;
      border: 1px solid #e8e8e8;
      position: relative;
    }
    .apanel-search i {
      color: silver;
      line-height: 28px;
      margin-left: 10px;
    }
    .apanel-search input {
      line-height: 28px;
      padding-left: 35px;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: transparent;
      border: 0;
    }
    .apanel-header {
      font-size: 13px;
      color: #999;
      margin: 5px 30px 10px;
    }
    .apanel-header span, .apanel-header input {
      vertical-align: middle;
    }

    .apanel-left, .apanel-right {
      width: 50%;
      float: left;
      height: 100%;
    }
    .apanel-left {
      border-right: 1px solid #e8e8e8;
    }
    .apanel-left, .apanel-right {
      display: -webkit-box;
      display: flex;
      -webkit-box-orient: vertical;
      -ms-flex-direction: column;
      -webkit-flex-direction: column;
      flex-direction: column;
    }
    .apanel-list-wrap {
      margin: 0;
      padding: 0 30px;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      -webkit-flex: 1;
      flex: 1;
    }
    .apanel-list-wrap li {
      list-style: none;
      display: -webkit-box;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      margin-bottom: 10px;
    }
    .apanel-list-wrap li .lp-avatar {
      margin-right: 10px;
      border-radius: 2px;
      width: 35px;
      height: 35px;
    }
    .apanel-list-wrap li .lp-name {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      color: rgba(0,0,0,.85);
    }
    .apanel-list-wrap li input {
      position: relative;
      z-index: -999;
    }
    .apanel-list-l li {
      cursor: pointer;
    }
    .apanel-list-l li i, .apanel-list-r li input {
      display: none;
    }
    .apanel-list-r li i {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="addPanel" class="add-panel-container">
    <div class="add-panel">
      <div class="apanel-left">
        <div class="apanel-search">
          <i class="layui-icon layui-icon-search"></i>
          <input class="apanel-search-input" type="text" placeholder="请输入标签">
        </div>
        <div class="apanel-header">
          <input class="apanel-selectall" type="checkbox" name="">
          <span>全部标签（<span class="apanel-lcount">{$count}</span>）:</span>
        </div>
        <ul class="apanel-list-wrap apanel-list-l">
        {loop $etTagArr as $ettag}
	        {loop json_decode($ettag['tags'],1) as $tag}
		        <li data-id="{$tag['id']}" data-name="{$tag['name']}">
		        	<span class="lp-name">{$tag['name']}</span>
		        	<input type="checkbox">
		        	<i class="layui-icon layui-icon-close apanel-delete"></i>
		        </li>
	        {/loop}
        {/loop}
        </ul>
      </div>
      <div class="apanel-right">
        <div class="apanel-header" style="color: #333;">
          已选标签:（<span class="apanel-rcount">0</span>）
        </div>
        <ul class="apanel-list-wrap apanel-list-r">
        </ul>
      </div>
    </div>
    <div style="text-align: right;padding-right: 30px;">
      <button onclick="parent.layer.closeAll()" type="button" class="layui-btn layui-btn-primary">取消</button>
      <button class="layui-btn layui-btn-normal apanel-confirm" lay-submit lay-filter="levelEditForm">保存</button>
    </div>
  </div>

  <script src="/js/jquery.min.js"></script>
  <script src="/layui/layui.all.js"></script>
  <script>
    $('.test-add').on('click', function() {
      layer.open({
        title: ['添加成员', 'font-weight:bold;text-align:center;'],
        type: 1,
        area: '800px',
        shadeClose: true,
        content: $('#addPanel')
      })
    })

// 搜索
    $('.apanel-search-input').on('input', function() {
      var q = $(this).val()
      var $items = $('.apanel-list-l li')
      if (!q) {
          $(".apanel-lcount").text($items.length);
          $items.show()
      } else {
          var arr = [];
          var a = 0;
          for (var i = 0, l = $items.length; i < l; i++) {
               var $item = $($items[i])
               if ($item.find('.lp-name').text().indexOf(q) > -1) {
                    arr[a] = $item.find('.lp-name').text();
                    a++;
                    $item.show()
               } else {
                    $item.hide()
               }
          }
          $(".apanel-lcount").text(arr.length);
     }
    })
    // 勾选
     $('.apanel-list-l').on('click', 'li', function(e) {
          e.preventDefault()
          var $checkbox = $(this).find('input')
          var checked = $checkbox[0].checked
          $checkbox.attr('checked', !checked)
          if (!checked) {
               $('.apanel-list-r').append($(this).clone(true))
          } else {
               $('.apanel-rcount').text($(".apanel-rcount").text()-1)
               var id = $(this).data('id')
               $('.apanel-list-r').find('[data-id=' + id + ']').remove()
          }
          // checkCount()
    })
    // 移除
    $('.apanel-list-r').on('click', '.apanel-delete', function(e) {
      e.preventDefault()
      var $item = $(this).parent('li')
      var id = $item.data('id')
      $item.remove()
      $('.apanel-list-l').find('[data-id=' + id + ']').find('input').attr('checked', false)
      checkCount()
    })
    // 全选
    $(".apanel-selectall").change(function() {
    　var checked = $(this)[0].checked
      if (checked) {
          $('.apanel-list-l input').attr('checked', true)
          var $items = $('.apanel-list-l').clone('true')
          $items.removeClass('apanel-list-l').addClass('apanel-list-r')
          $('.apanel-list-r').replaceWith($items)
          $('.apanel-lcount').text($(".apanel-lcount").text())
          $('.apanel-rcount').text($(".apanel-lcount").text())
      } else {
          $('.apanel-list-l input').attr('checked', false)
          $('.apanel-list-r').empty()
          $('.apanel-lcount').text($(".apanel-lcount").text())
          $('.apanel-rcount').text(0)
      }
      // checkCount()
    })
    // 校对数量
     function checkCount() {
          $('.apanel-lcount').text($('.apanel-list-l li').length)
          $('.apanel-rcount').text($('.apanel-list-r li').length)
     }
    // 确定
    $('.apanel-confirm').on('click', function() {
      
      var $items = $('.apanel-list-r li')
      var span = $('.apanel-list-r li span')
      var arr = []
      var arrs = []
      for (var i = 0, l = $items.length; i < l; i++) {
         if(!$($items[i]).attr("style")){
              arr.push($($items[i]).data('id'))
              // arrs.push($($items[i]).data('name'))
              arrs.push('<li>'+$($items[i]).data('name')+'</li>');
         }
      }
      if(arr.length > 1){
        layer.msg("至多选择一个标签");return;
      }
    parent.$("#checkLableCon").empty();
		parent.$("#checkLableCon").html(arrs);
		parent.$("#checkLable").val(arr);
		parent.layer.closeAll('iframe');
    })
  </script>

</body>
</html>